<template>
  <div class="mt-8">
    <a-flex :gap="12" justify="space-between">
      <a-list bordered :data-source="links" class="flex-1">
        <template #renderItem="{ item }">
          <a-list-item @click="openLink(item.link)">
            <a-list-item-meta>
              <template #title>
                <a :href="item.link" target="_blank">
                  {{ item.title }}
                </a>
              </template>
              <template #description>
                {{ item.desc }}
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-button type="ghost">
                <RightOutlined />
              </a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { openLink } from '@/utils/common/utils';
import { RightOutlined } from '@ant-design/icons-vue';

const links = [
  {
    title: 'AX-系统介绍',
    link: 'https://www.yuque.com/u32997899/ax/kv2sq5i0nrz3831c',
    desc: '如果你希望了解整个系统的特色，你可以阅读这里。',
  },
  {
    title: 'AX-系统安装',
    link: 'https://www.yuque.com/u32997899/ax/kbyz4nhv0eh2ko9b',
    desc: '如果你能快速部署系统，这里有指引。',
  },
  {
    title: 'AX-代码生成',
    link: 'https://www.yuque.com/u32997899/ax/hiponw8d13sgi2al',
    desc: '如果你希望能快速上手部署安装，请安装这里',
  },
];
</script>

<style lang="scss" scoped>
.card {
  height: 80px;
  padding: 4px;
  border: 1px solid var(--border-color) ddd91;
  display: flex;
  border-radius: var(--radius);
  justify-content: center;
  align-items: center;
}
</style>
